<template>
  <div>
    <contenHeader title="修改文章"></contenHeader>
    <div class="editarticle">
      <div class="from_box">
        <el-form ref="form" label-width="80px">
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="query" style="background-image: linear-gradient(#2ab1e8, #35d1ce);border:unset"
              type="primary">立即修改
            </el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="from_box">
        <tiptap  @getvalue="getvalue" :htmltxt="html" />
      </div>
    </div>
  </div>
</template>

<script>
import tiptap from "../components/Tiptap.vue";
export default {
  data() {
    return {
      html: '<p>我是富组件123</p>',      
    }
  },
  components: {
    tiptap,
  },
  methods: {
    query() {
      console.log("确认")
    },
    getvalue(data) {
      console.log(data.getHtml())
    }
  }
};
</script>

<style>
.editarticle {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.from_box {
  padding-right: 10px;
}
</style>